<template>
  <span class="star">
    <span v-show="!isStar">
      <ri i="heart" title="收藏" class="grey" @click="fav"></ri>
    </span>
    <span class="star-stats" v-show="isStar">
      <ri i="star-fill"></ri>
      <span class="star-count">
        {{ starCount }}
      </span>
    </span>
  </span>
</template>

<script>
export default {
  props: ["mid", "stars"],
  data() {
    return {
      starCount: this.stars,
    };
  },
  computed: {
    isStar() {
      return this.starCount > 0;
    },
  },
  watch: {
    stars() {
      this.starCount = this.stars;
    }
  },
  methods: {
    fav() {
      if (this.mid) {
        return this.authGet("/api/v1/stats/stars/inc/" + this.mid).then(res => {
          this.starCount = res.data;
        });
      } else {
        console.log("没有给出mid:", this.mid);
      }
    },
  },
};
</script>

<style lang="stylus">
.star
  margin 0 5px
  color #409EFF

  .grey
    color #ccc
    cursor pointer

    &:hover
      color #409EFF
</style>
<style lang="stylus" scoped>
.star-button
  padding 8px 10px

  &.active
    padding 8px 5px 8px 10px

  .star-count
    margin-left 5px

.star-down-button
  padding 8px 10px 8px 5px
</style>